<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
</head>

<body>
    <div id="app" class="container-fluid">
        <div class="col-sm-12" id="right">
            <ol class="breadcrumb">
                <li class="active">菜单
                </li>
                <li class="active">用户管理
                </li>
            </ol>

            <div class="panel panel-default">
                <div class="panel-heading">
                    搜索
                </div>
                <div class="panel-body">
                    <div class="form-inline">
                        <div class="form-group">
                            <label for="name">姓名</label>
                            <input type="text" class="form-control" id="name" v-model="username"  placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <!-- <label for="name">状态</label> -->
                            <!-- <select class="form-control">
                            <option>正常</option>
                            <option>禁用</option>
                        </select> -->
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-default" @click="selectuser">开始搜索</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--
            列表展示
        -->
            <div class="table-responsive">
                <table class="table table-striped ">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>用户名</th>
                            <th>电话</th>
                            <th>邮箱</th>
                            <th>密码</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr v-for="(item,index) in UserData" :key="index">
                            <th scope="row">{{item.id}}</th>
                            <td scope="row">{{item.Name}}</td>
                            <td scope="row">{{item.Phone}}</td>
                            <td scope="row">{{item.Email}}</td>
                            <td scope="row">{{item.PassWord}}</td>
                            <td scope="row">
                                <button type="button" class="btn btn-danger" @click="delectArticle(item.id)">删除</button>
                                <button class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                                    @click="selectByid(item.id)">更新</button>


                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <ul class="pagination" style="float: right;">
                <li> <button class="btn btn-primary" type="button" @click="prePage">上一页</button>
                    <input style="width: 30px;" type="text" v-model="userpage" @change="changepageshow"
                        @keyup.enter="changepageshow" @click=" userpagenull">
                    <button class="btn btn-primary" type="button" @click="nextPage">下一页</button>
                    <p style="float:right; font-size: 20px;">共{{this.pageNum-1}}页</p>
                </li>
            </ul>
        </div>











        <!-- --------------------------------- -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">更新留言</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">名称</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.Name"
                                placeholder="请输入名称">
                        </div>
                        <div class="form-group">

                            <label for="exampleInputEmail1" class="form-label">电话</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.Phone"
                                placeholder="请输入名称">

                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="name" v-model="selectuserdata.Email"
                                placeholder="请输入名称">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="form-label">密码</label>
                            <input type="text" class="form-control" id="name" v-model="selectuserdata.PassWord"
                                placeholder="请输入名称">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-default" @click="updateuser">提交</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="selectbyupdate">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>













    </div>
</body>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            UserData: {
                id: '',
                Name: '',
                Phone: '',
                Email: ''

            },
            totalPage: {
                id: '',
                articlename: '',
                author: '',
                text: '',
                Image: ''
            },

            selectuserdata: {
                Id: '',
                Name: '',
                Phone: '',
                Email: '',
                passWord:''

            },
            username: '',

            // 每页显示数量
            pageSize: 5,
            // 共几页
            pageNum: 1,
            // 当前显示的数据
            dataShow: "",
            // 默认当前显示第一页
            currentPage: 0,
            userpage: 0

        },
        created() {
            this.getuseralldata();
        },
        methods: {
            getuseralldata: function () {
                const token = window.localStorage.getItem('token')
                let that = this;
                axios.get(
                        `http://localhost:8999/MessageBoard_war/SelectUser`, {
                            headers: {
                                token: `${token}`
                            }
                        }
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.UserData = response.data.data;




                            // 分页逻辑
                            that.pageNum = Math.ceil(that.UserData.length / that.pageSize) || 1;

                            for (let i = 0; i < that.pageNum; i++) {
                                // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                                // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
                                that.totalPage[i] = that.UserData.slice(that.pageSize * i, that
                                    .pageSize * (i + 1))
                            }
                            // 获取到数据后显示第一页内容
                            that.UserData = that.totalPage[that.currentPage];





                        } else {
                            alert(response.data.data)
                        }
                    })

            },
            delectArticle(id) {
                const token = window.localStorage.getItem('token');
                    axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/deleteuser?id=${id}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (res) {
                        alert("删除成功")
                    })
                    .catch(function (res) {
                        alert(res.data.data)
                    })
            },
            selectuser() {
                if (this.username == '') {
                    this.getuseralldata()
                    return;
                }
                let that = this;

                const token = window.localStorage.getItem('token');
                axios.get(
                    `http://localhost:8999/MessageBoard_war/selectuserbyname?name=${this.username}`, {
                        headers: {
                            token: token
                        }
                    }).then(function (res) {
                    that.UserData = res.data.data


                    // 分页逻辑
                    that.pageNum = Math.ceil(that.UserData.length / that.pageSize) || 1;

                    for (let i = 0; i < that.pageNum; i++) {
                        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
                        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
                        that.totalPage[i] = that.UserData.slice(that.pageSize * i, that
                            .pageSize * (i + 1))
                    }
                    // 获取到数据后显示第一页内容
                    that.UserData = that.totalPage[that.currentPage];



                }).catch(function (res) {
                   alert(res.data.data)
                })
            },
            selectByid(id) {
                let that = this;
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'get',
                        url: `http://localhost:8999/MessageBoard_war/selectuserbyid?id=${id}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        that.selectuserdata = response.data.data;
                    })
                    .catch(function (error) {});
            },
            updateuser() {
                const token = window.localStorage.getItem('token');
                axios({
                        method: 'post',
                        url: `http://localhost:8999/MessageBoard_war/updateUser?name=${this.selectuserdata.Name}&email=${this.selectuserdata.Email}&password=${this.selectuserdata.PassWord}&id=${this.selectuserdata.id}&phone=${this.selectuserdata.Phone}`,
                        headers: {
                            'token': token
                        }
                    }).then(function (response) {
                        if (response.data.code == 200) {
                            alert("修改成功");
                        } else {
                            alert(response.data.data)
                        }
                    })
                    .catch(function (error) {
                        alert(error.data)
                    });
            },
            selectbyupdate() {
                this.username = this.selectuserdata.Name;
                this.selectuser();
            },
            // 下一页
            nextPage() {
                if (this.currentPage === this.pageNum - 1) return;
                this.UserData = this.totalPage[++this.currentPage];
                this.userpage = this.currentPage;
            },
            // 上一页
            prePage() {
                if (this.currentPage === 0) return;
                this.UserData = this.totalPage[--this.currentPage];
                this.userpage = this.currentPage;
            },
            changepageshow() {
                if (this.userpage === 0 || this.userpage < 0) return;


                var patrn = /^[0-9]{1,20}$/;

                if (!patrn.exec(this.userpage)) {
                    alert("你就那么想看bug吗？");
                    this.userpage = this.currentPage;
                    return;
                } else {
                    this.UserData = this.totalPage[this.userpage];
                    this.currentPage = this.userpage;
                }

            },
            userpagenull() {
                this.userpage = null

            }
        }
    })
</script>

</html>